<template>
    <view class="page-wrap">
        <image class="cover" :src="info.cover"></image>
        <view class="title">{{info.title}}</view>
        <view class="info">
            <view class="time">
                <u-icon name="clock" :color="color['ico-color']" size="28"></u-icon>
                报名时间：{{info.registrationStart}} ~ {{info.registrationEnd}}
            </view>
            <view class="time">
                <u-icon name="clock" :color="color['ico-color']" size="28"></u-icon>
                活动时间：{{info.activityStart}} ~ {{info.activityEnd}}
            </view>
            <view class="time">
                <u-icon name="map" :color="color['ico-color']" size="28"></u-icon>
                活动地点：{{info.activityAddress}}
            </view>
        </view>
        <view class="content">
            <u-parse :content="info.content" :show-with-animation="true" :lazy-load="true" />
        </view>
        <view class="footer">
            <u-button type="success" shape="circle" v-if="status === 'waiting'">敬请期待</u-button>
            <u-button type="success" shape="circle" v-else-if="register == 'register'" @click="toRegister">报名成功</u-button>
            <u-button type="warning" shape="circle" v-else-if="status === 'end'">报名结束</u-button>
            <u-button type="primary" shape="circle" v-else @click="toRegister">立即报名</u-button>
            <button class="share-button" type="default" open-type="share">
                <u-icon name="share" color="#fff" size="42rpx"></u-icon>
            </button>
        </view>
        <global-components ref="global-components" :loading="false"></global-components>
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations
    } from 'vuex';
    export default {
        data() {
            return {
                id: '', // 活动id
                registrationId: '',
                info: {},
                status: '',
                register: '',
                scene: '',
            };
        },
        computed: {
            ...mapState(['login'])
        },
        methods: {
            toRegister(id) {
                if (this.login) {
                    this.$toPage({
                        url: '/pages/activity/register',
                        params: {
                            id: this.registrationId,
                            activityId: this.info.id,
                        }
                    });
                } else {
                    this.$refs['global-components'].showAuth();
                }
            },
        },
        watch: {},
        onLoad(option) {
            this.id = option.id;
        },
        onShow() {
            this.id && this.$api.activity.detail({
                id: this.id
            }).then(res => {
                this.info = res.info
                this.status = res.status
                this.register = res.register
                this.registrationId = res.registrationId || ''
                this.scene = res.scene || ''
            })
        },
        onShareAppMessage() {
            return {
                title: `${this.info.title} - 好友邀请`,
                path: `pages/activity/detail?id=${this.info.id}&scene=${this.scene}`,
                imageUrl: this.info.cover
            }
        },
        onHide() {},
        onUnload() {},
        onReachBottom() {},
        onPageScroll(event) {},
        onPullDownRefresh() {},
    };
</script>

<style lang="scss">
    .page-wrap {
        background: #fff;
        padding: 0 32rpx;
        font-size: 32rpx;
        min-height: 100vh;
        padding-bottom: 130rpx;

        .cover {
            margin: 0 -32rpx;
            width: 750rpx;
            height: 350rpx;
        }

        .title {
            text-align: center;
            padding: 16rpx 0;
        }

        .info {
            border-bottom: 1rpx solid #eee;
            margin-bottom: 16rpx;

            .time {
                font-size: 26rpx;
                color: #666;
                padding: 16rpx 0 32rpx 0;

                ::v-deep .u-icon {
                    display: inline-block;
                    margin-right: 0.5em;
                }
            }
        }

        .footer {
            position: fixed;
            bottom: 0;
            padding: 32rpx;
            width: 100%;
            left: 0;
            display: flex;

            .share-button {
                background: $primary-color ;
                margin-left: 1em;
                width: 78rpx;
                height: 78rpx;
                border-radius: 50%;
                display: flex;
                justify-content: center;
            }
        }
    }
</style>